<template>
  <div class="blog-m-conment--wrap">
    <van-cell-group>
      <div class="has-conment" v-if="hasConment">
        <div
          class="blog-m-conment--item"
          v-for="conment in conments"
          :key="conment.id"
        >
          <van-cell
            :title="conment.uid?.nickName"
            :value="conment.date | padDate"
            :border="false"
          />
          <van-cell :value="conment.content" />
        </div>
      </div>
      <van-empty  class="blog-m-conment--item" v-else description="暂无评论, 来写一篇吧" />
      <template #title>
        <h2 class="blog-m-conment--title">评论区</h2>
      </template>
    </van-cell-group>
  </div>
</template>

<script>
/*
  在文章下方, 设置评论列表, 组件放置在aticle中

*/
export default {
  name: "VueEleMConmont",
  props: {
    conments: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  filters: {
    padDate(date) {
      return date.match(/(\d+)年(\d+)月(\d+)日/)[0];
    },
  },
  computed: {
    hasConment() {
      return this.conments?.length
    }
  },
  mounted() {},

  methods: {},
};
</script>
<style lang="stylus" 
>
div.van-cell-group__title {
  padding: 0;
}

.blog-m-conment--title {
  background-color: #f2f3f5;
  padding-left: 0.5em;
  font-weight 600
  // text-align center
}

.blog-m-conment--item {
  border-bottom: 0.22em solid #f1f1f1;
}
</style>
